<template>
<div>
<el-row :gutter="20">
  <el-col :span="10">
    <el-card class="box1" style="height: 166px" shadow="never">
      <p class="tag">工单统计<i>2023.04.01~2023.04.12</i></p>
       <div class="box_body">
              <div class="stats">
                <div class="number">142</div>
                <div class="name">工单总数（个）</div>
              </div>
              <div class="stats">
                <div class="number">1</div>
                <div class="name">工单总数（个）</div>
              </div>
              <div class="stats">
                <div class="number">0</div>
                <div class="name">工单总数（个）</div>
              </div>
              <div class="stats">
                <div class="number">39</div>
                <div class="name">工单总数（个）</div>
              </div>
            </div>
      </el-card>
    </el-col>
      <el-col :span="8">
         <el-card class="box2" style="height: 166px" shadow="never">
            <p class="tag">销售统计<i>2023.04.01~2023.04.12</i></p>
                  <div class="box_body">
              <div class="stats">
                <div class="number">142</div>
                <div class="name">工单总数（个）</div>
              </div>
              <div class="stats">
                <div class="number">1</div>
                <div class="name">工单总数（个）</div>
              </div>
              </div>
           </el-card>
        </el-col>
         <el-col :span="6">
         <el-card class="box3" style="height: 538px" shadow="never">
            <p class="tag">商品统计<i>2023.04.01~2023.04.12</i></p>
          <div v-for="(item,index) in toptensum" :key="index" class="box3list" style="height: 23px">
              <div class="box3list1">1</div>
              <div class="box3list2">{{item.skuName}}</div>
              <div class="box3list3">{{item.count}}单</div>
          </div>
           </el-card>
        </el-col>
          <el-col :span="18">
         <el-card class="box4" style="height: 352px" shadow="never">
            <p class="tag">销售数据<i>2023.04.01~2023.04.12</i></p>
           <div class="box4sum">
             <div id="charts" class="box4sum1"></div>
            <div id="charts1" class="box4sum2"></div>
           </div>
           </el-card>
        </el-col>
        <el-col :span="15">
         <el-card class="box5" style="height: 353px" shadow="never">
           <p class="tag">合作商点位数Top5</p>
           <div class="box5sum">
            <div ref='leftbox' class="leftbox"></div>
            <div class="rightbox">
                 <div class="boxxx">
                  <div class="count">16</div>
                 <div class="name">点位数</div>
                <div class="count">5</div>
                 <div class="name">合作商</div>
                 </div>

                </div>
           </div>
           </el-card>
        </el-col>
        <el-col :span="9">
         <el-card class="box6" style="height: 353px" shadow="never">
            <p class="tag">异常设备监控</p>
           <div class="box4sum">
             <!-- <div id="charts" class="box4sum1"></div>
            <div id="charts1" class="box4sum2"></div> -->
           </div>
           </el-card>
        </el-col>
  </el-row>
</div>
</template>

<script>
import * as echarts from 'echarts'
import { toptenComm } from '@/api/user'
import moment from 'moment'
export default {
  data () {
    return {
      topValue: 10,
      start: '',
      end: '',
      toptensum: []
    }
  },
  created () {
    this.end = moment().format('YYYY-MM-DD')
    this.start = moment().startOf('month').format('YYYY-MM-DD')
    this.toptenComm()
  },
  mounted () { // 最早会获取DOM元素的生命周期函数 挂载完毕
  // 左边的图
    document.getElementById('charts')
    const myChart = echarts.init(document.getElementById('charts'))
    myChart.setOption({
      title: {
        text: '销售额趋势图',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '销售额',
          smooth: true,
          type: 'line',
          data: [2629.1, 4356.05, 5343.29, 5514.47, 3777.59, 5906.59, 0],
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(255, 158, 68, 0.8)'
              },
              {
                offset: 1,
                color: 'rgba(255, 70, 131, 0.3)'
              }
            ])
          },
          lineStyle: {
            width: 2,
            color: 'red'
          }
        }
      ]
    })
    //  右边的图
    document.getElementById('charts1')
    const myChart1 = echarts.init(document.getElementById('charts1'))
    myChart1.setOption({
      title: {
        text: '销售额分布',
        left: 'center'
      },
      // tooltip: {},
      xAxis: {
        data: ['北京平', '霍营街']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          barWidth: '10%',
          data: [23559.49, 3089.21]
        }
      ]
    })
    // 饼状图
    const myChart3 = echarts.init(this.$refs.leftbox)
    myChart3.setOption({
      series: [
        {
          type: 'pie',
          data: [
            {
              value: 10,
              name: '金燕龙合作商'
            },
            {
              value: 2,
              name: '天华物业'
            },
            {
              value: 2,
              name: '北京合作商'
            },
            {
              value: 1,
              name: 'likede'
            },
            {
              value: 1,
              name: '佳佳'
            }
          ],
          radius: ['25%', '70%']
        }
      ]
    })
  },
  methods: {
    async toptenComm () {
      const res = await toptenComm(this.topValue, this.start, this.end)
      this.toptensum = res.data
    }
  }

}
</script>

<style lang="scss" scoped>
.el-card{
  border-radius: 20px;
  position: relative;
  .tag {
 font-size: 16px;
 font-weight: 800;
 margin-top: -10px;
 > i {
  margin-left: 10px;
     font-size: 12px;
     font-style: normal;
      font-size: 12px;
      font-weight: 200;
      color: #666;;
 }
  }

}
.box1{
  // background: #fbefe8 url(@/assets/sale.606b0d8c.png) no-repeat
  background-color: #E9F3FF;
   .box_body {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      margin-top: 40px;
      }
      .number {
         line-height: 25px;
          width: 80px;
          height: 40px;
          font-size: 38px;
          font-weight: 800;
          color: #072074;
          // text-align: center;
          text-shadow: 1px 4px 6px  #91A7DC;
      }
      .name {
         font-size: 12px;
          line-height: 25px;
          color: #91A7DC;
      }
}
.box2 {
    background: #fbefe8 url(@/assets/sale.606b0d8c.png) no-repeat;
   .box_body {
      display: flex;
      justify-content: space-between;
      padding: 0 40px;
      margin-top: 40px;
      }
      .number {
         line-height: 25px;
          width: 80px;
          height: 40px;
          font-size: 38px;
          // font-weight: 800;
       font-weight: 600;
          color: #FF5757;
          // text-align: center;
          text-shadow: 1px 4px 6px  #FF5757;
      }
      .name {
         font-size: 12px;
          line-height: 25px;
          color: #DE9690;
      }

}
.box3 {
  .box3list {
    // width: 341px;
  display: flex;
  margin-bottom: 27px;
  .box3list1 {
    width: 20%;
  }
 .box3list2 {
    width: 50%;
  }
  .box3list3{
    width: 30%;
  }
  }
}
 .box4 {
        position: absolute;
        width: 73.5%;
        top: 185px;
        .box4sum {
          display: flex;
          width: 100%;
          height: 278px;
          .box4sum1 {
            // flex:1
          width: 526px;
          height: 278px;
          }
           .box4sum2 {
            // flex:1
             width: 526px;
          height: 278px;
          }
        }
      }
      .box5{
        margin-top: 20px;
        .box5sum {
          display: flex;
          height: 300px;
          .leftbox {
            width: 70%;
             height: 300px;
          }
          .rightbox {
            width: 154px;
             height: 230px;
             text-align: center;
            //  line-height: 230px;
            .boxxx{
              text-align: center;
               line-height: 230px;
              .count {
                margin-top: 50px;
                     height: 33px;
                  font-size: 24px;
                  font-family: PingFangSC-Semibold,PingFang SC;
                  font-weight: 600;
                  color: #072074;
                  line-height: 33px
            }
            .name{
                  height: 17px;
                margin-top: 6px;
                font-size: 12px;
                font-family: PingFangSC-Regular,PingFang SC;
                font-weight: 400;
                color: #000412;
                line-height: 17px;
            }

            }

          }
        }
      }
      .box6{
        margin-top: 20px;
      }

</style>
